<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
<!--    <link rel="stylesheet" href="./utils/css/bootstrap.min.css" />-->
    <title>Hello, world!</title>
  </head>
  <body>
    <div id="test" onclick="clickTest()">testclick</div>
    <ul class="table-list">
      <li class="text-primary">子元素</li>
    </ul>
    <script src="../../utils/jquery/jquery.3.7.min.js"></script>
    <script src="../../utils/js/bootstrap.bundle.js"></script>
    <script type="text/javascript">
      function clickTest(){
        console.log($(this),'js click')//window
      }
      // 传统复制方法
      function execCommandCopy($el, text) {
        // 创建临时输入框
        const $temp = $('<textarea>');
        $('.copy').append($temp);
        $el.val(text).select();
        document.execCommand('copy');
        console.log('复制成功');
      }
      execCommandCopy($('#test'), '123456');
      $(document).ready(function () {
            $("#test").click(function () {
              console.log($(this),"jquery click") //当前元素
              // $(this).after('<div id="test2" onclick="clickTest2()">testclick2</div>')
              $(this).after('<div id="test2" >testclick2</div>')
            });
            //动态添加元素不生效
            $("#test2").click(function () {
              console.log($(this),'js click2 dir')
            })
            //1）动态添加元素事件绑定生效
            $(document).on('click', '#test2', function () {
              console.log($(this),'js click2 document')
            })
        });



      // 点击表格单元格复制功能
      $(document).ready(function () {
        // 使用事件委托绑定点击事件
        $('.table-list').on('click', '.text-primary', function (e) {
          // 获取点击的文本内容
          const text = $(this).text().trim();
          // 空内容不处理
          if (!text || text === '暂无数据') return;
          // 创建临时输入框
          const $temp = $('<textarea>');
          $('.copy').append($temp);
          try {
            // 现代剪贴板API（需要HTTPS环境）
            if (navigator.clipboard) {
              navigator.clipboard.writeText(text)
                      .then(() => {
                        console.log('复制成功');
                      })
                      .catch(err => {
                        console.error('复制失败:', err);
                        execCommandCopy($temp, text); // 降级方案
                      });
            } else {
              // 传统复制方式
              execCommandCopy($temp, text);
            }
          } catch (err) {
            console.log('复制失败，请手动选择复制');
          } finally {
            $temp.remove();
          }
        })});
      //2）动态添加元素事件绑定生效
      // function clickTest2(){
      //   console.log($(this),'js click2')
      // }
        //3）动态添加元素事件绑定生效
        //  使用事件代理机制 绑定父级元素配合1）监听子元素
      // jq 和 原生 js 事件绑定的区别
        // 1.jq 事件绑定的 this 是当前元素 原生 js 事件绑定的 this 是 window
        // 2.原生绑定事件回优先于 jq 绑定事件
        // 3.原生绑定事件可以使用 event.stopPropagation() 阻止事件冒泡

    </script>
  </body>
</html>